{% set origin = window.location.origin %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./images/favicon.ico" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./main.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Platformatic Gateway</title>
  </head>
  <body>
    <div id="root">
      <div class="plt-triangle-container"><div class="plt-triangle-content-opacque"></div></div>
      <button id="button-theme-selector" type="button" class="theme-selector" alt="theme selector" onclick="toggleLightMode()"></button>
      
      <div id="content">
        <img id="logo" height="256" />
        <p class="text-desktop-display"><span>Welcome to</span><br/><span class="text-main-green">Platformatic Gateway</span></p>
        <div class="button-container">
          {% if hasOpenAPIServices %}
          <a id="openapi-link" target="_blank" class="button-link" href="documentation">
            <img src="./images/openapi.svg" />
            OpenAPI Documentation
          </a>
          {% endif %}
          {% if hasGraphQLServices %}
          <a id="graphql-link" target="_blank" class="button-link" href="graphiql">
            <img src="./images/graphiql.svg" />
            GraphiQL
          </a>
          {% endif %}
        </div>
        <a href="https://docs.platformatic.dev" target="_blank" class="plt-doc-link">Explore our documentation</a>

        <div class="services-container">
          {% for key, value in services %}
          {% if value.services.length %}
          <div class="service-type">
            <div class="service-type-name">
              <img src="{{ value.icon }}" alt="{{ value.title }}">
              {{ value.title }} <span class="count">({{ value.services.length }})</span></div>
            <div class="services-list">
              {% for svc in value.services %}
              <div class="service-details">
                <div>
                  <div class="service-title">{{ svc.id }}</div>
                  {% if key === 'proxy' %} 
                    <div class="service-path">{{ svc.proxy.prefix }}</div>
                  {% elif key === 'openapi' %} 
                    <div class="service-path">/{{ svc.id }}</div>
                  {% endif %} 
                </div>
                {% if key === 'proxy' %} 
                <a id="{{ key }}-{{ svc.id }}-external-link" target="_blank">
                  <img src="./images/external-link.svg" alt="External Link">
                </a>
                {% endif %} 
              </div>
              {% endfor %}
              
            </div>
          </div>
          {% endif %}
          {% endfor %}    
        </div>
      </div>
    </div>

    <script>
      let currentPath = window.location.pathname
      const href = window.location.href.replace(/\/$/, '')
      {% for key, value in services %}
        {% if key === 'proxy' %}
          {% if value.services.length %}
            {% for svc in value.services %}
        document.getElementById('{{ key }}-{{ svc.id}}-external-link').href = href + '{{ svc.externalLink }}'
            {% endfor %}
          {% endif %}
        {% endif %}
      {% endfor %}
      const prefersLightScheme = window.matchMedia('(prefers-color-scheme: light)');
      if (prefersLightScheme.matches) {
        document.body.classList.add('light-theme');
        document.getElementById('logo').src = currentPath + 'images/platformatic-logo-light.svg'
      } else {
        document.body.classList.remove('light-theme');
        document.getElementById('logo').src = currentPath + 'images/platformatic-logo-dark.svg'
      }
      
      const toggleLightMode = function() {
        document.body.classList.toggle('light-theme');
        if (document.body.classList.contains('light-theme')) {
          document.getElementById('logo').src = currentPath + 'images/platformatic-logo-light.svg'
        } else {
          document.getElementById('logo').src = currentPath + 'images/platformatic-logo-dark.svg'
        }
      }
    </script>
  </body>
</html>
